<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=0;"/>
		<title>{dede:field.title/}-{dede:global.cfg_webname/}</title>
        <meta name="description" content="{dede:field name='description'  function='html2text(@me)'/}" />
        <meta name="keywords" content="{dede:field name='keywords'/}" />
		<link rel="stylesheet" href="{dede:global.cfg_templets_skin/}/style/bootstrap.min.css" />
		<link rel="stylesheet" href="{dede:global.cfg_templets_skin/}/style/public.css" />
		<link rel="stylesheet" href="{dede:global.cfg_templets_skin/}/style/animate.css" />
		<style type="text/css">
			.flipOutY{display: none;}
		</style>
	</head>
	<body>
		<!--nav-->		
		{dede:include filename="head.htm"/}
        <!--内容-->
        <div class="container" style="min-height: 700px;">
        	<div>
        		<div class="col-md-12 text-center animated bounceIn">
        			<h2><strong>部分客户案例</strong></h2>
        			<p class="font20">We show you some portfolios here</p>
        		</div>
        		<ul class="case-nav">
        			<!--<li class="lia case-btn1">全部<div class="case-nav-counter">21</div></li>-->
					<li class="lia case-btn1">全部</li>
					{dede:channel typeid = '3' type = 'son' currentstyle='' row = '6'}
        			<li class='case-btn2'>[field:typename/]</li>
                    {/dede:channel}
        		</ul>
        		<div class="row case-img">
                    <!--{dede:list pagesize ='7'}
                    <span class="case-group">
        			    <div class="col-md-4 col-sm-6 case-group"><img src="[field:picname/]" alt="" /></div>
                    </span>
                    {/dede:list}-->
					<span class="case-group">
						{dede:arclist typeid='22'}
        			    <div class="col-md-4 col-sm-6"><img src="[field:picname/]" alt=""/></div>
						{/dede:arclist}
        			</span>
        			<span class="case-group">
        			    {dede:arclist typeid='23'}
        			    <div class="col-md-4 col-sm-6"><img src="[field:picname/]" alt=""/></div>
						{/dede:arclist}
        			</span>
        			<span class="case-group">
        			    {dede:arclist typeid='24' }
        			    <div class="col-md-4 col-sm-6"><img src="[field:picname/]" alt=""/></div>
						{/dede:arclist}
        			</span>
        			<span class="case-group">
        			    {dede:arclist typeid='25'}
        			    <div class="col-md-4 col-sm-6"><img src="[field:picname/]" alt=""/></div>
						{/dede:arclist}
        			</span>
        			<span class="case-group">
        			   {dede:arclist typeid='26'}
        			    <div class="col-md-4 col-sm-6"><img src="[field:picname/]" alt=""/></div>
						{/dede:arclist}
        			</span>
        			<span class="case-group">
        			    {dede:arclist typeid='27'}
        			    <div class="col-md-4 col-sm-6"><img src="[field:picname/]" alt=""/></div>
						{/dede:arclist}
        			</span>
        			<span class="case-group">
        			    {dede:arclist typeid='28'}
        			    <div class="col-md-4 col-sm-6"><img src="[field:picname/]" alt=""/></div>
						{/dede:arclist}
        			</span>
        		</div>
        	</div>
        </div>
     {dede:include filename="footer.htm"/}
        <script type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/jquery-2.2.3.min.js" ></script>
        <script type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/bootstrap.min.js" ></script>
        <script>
        	$(document).ready(function(){
        		var $caseli=$(".case-nav li");
        		var $casecounter=$(".case-nav-counter");
        		var $casebtn2=$(".case-btn2");
        		var $casebtn1=$(".case-btn1");
        		var $casegroup=$(".case-group");
        		var $caseimg=$(".case-group div");
        		$caseli.click(function(){
        			$caseli.removeClass("lia");
        			$(this).addClass("lia");
        		});
        		$caseli.hover(function(){
        			$(this).children($casecounter).css({"bottom":"40px","opacity":"1"});
        		},function(){
        			$(this).children($casecounter).css({"bottom":"0px","opacity":"0"});
        		}
        		);
//      		$casebtn2.each(function(index){
//      			$(this).click(function(){  
//      				$casegroup.children().addClass("animated flipOutY");
//      				$casegroup.eq(index).children().removeClass("animated flipOutY");        				
//     				    if ($casegroup.children($caseimg).hasClass("animated flipOutY")) {     				    	
////     				    		$casegroup.children($caseimg).addClass("display-none");
////    				            $casegroup.eq(index).children().removeClass("display-none");	        
//     				    } else{       				    	
//     				        $casegroup.eq(index).children().addClass("animated flipInY");	
//     				    };
//      			});
//      		});
				$('.case-btn2').click(function(){
					var posi=$(this).index()-1;
					$casegroup.eq(posi).children().removeClass('flipOutY').addClass("animated flipInY").parent().siblings().children().addClass("animated flipOutY");
				});
				$('.case-btn1').click(function(){
					$casegroup.children().removeClass('flipOutY').addClass("animated flipInY");
				});
        	});
        </script>
	</body>
</html>